<template>
  <div>
    <van-nav-bar title="房屋管理" left-arrow @click-left="$router.back()" />
    <div class="nf" v-if="!status">
      <img src="http://liufusong.top:8080/img/not-found.png" alt="">
      <p>您还没有房源，<span @click="goToHouseRelease">去发布房源</span>吧</p>
    </div>
    <HouseItem v-for="item in leaseList" :key="item.houseCode">
      <template #house-left>
        <img
          :src="`http://liufusong.top:8080${item.houseImg}`"
          alt
        />
      </template>
      <template #house-right>
        <h3>{{item.title}}</h3>
        <div class="house-ms">{{item.desc}}</div>
        <div class="house-tag">{{item.tags[0]}}</div>
        <div class="price">
          <span>{{item.price}}</span>元/月
        </div>
      </template>
    </HouseItem>
  </div>
</template>

<script>
import request from '@/utils/request'
import HouseItem from '@/components/house-item.vue'

export default {
  name: 'HaokezfMycollect',
  components: {
    HouseItem
  },

  data () {
    return {
      leaseList: [],
      status: ''
    }
  },

  mounted () {},
  created () {
    this.getLease()
  },

  methods: {
    async getLease () {
      try {
        const res = await request.get('/user/houses')
        console.log(res)
        this.leaseList = res.body
        this.status = res.status
      } catch (err) {
        console.log(err)
      }
    },
    goToHouseRelease () {
      this.$router.push('/houseRelease')
    }
  }
}
</script>

<style lang="less" scoped>
.nf {
  width: 170px;
  height: 150px;
  margin: 20px auto;
  img {
    width: 100%;
  }
  p {
    font-size: 12px;
    text-align: center;
    span {
      color: #33be85;
    }
  }
}
</style>
